<template>
  <ion-page>
    <!-- <ion-toolbar>
      <ion-icon style="font-size: 70px" aria-hidden="true" :icon="personCircleOutline"></ion-icon>
    </ion-toolbar> -->
    <ion-toolbar>
      <div class="user-header">
        <!-- 头像显示 -->
        <ion-avatar class="user-avatar">
          <ion-icon style="font-size: 70px" :icon="personCircleOutline"/>
        </ion-avatar>
        <div class="user-info">
          <h2>{{ userInfo.realNameForChinese || '未命名用户' }}</h2>
          <p>{{ userInfo.loginName }}</p>
          <p>{{ roleInfo.displayRoleName }}</p>
        </div>
      </div>
    </ion-toolbar>
    <ion-content class="ion-padding">
      <ion-button 
        expand="block" 
        color="danger"
        @click="logout"
      >
        <ion-icon :icon="logOutOutline" slot="start"/>
        Exit
      </ion-button>
    </ion-content>
  </ion-page>
</template>

<script setup>
import { logOutOutline,personCircleOutline} from 'ionicons/icons';
import { 
  IonPage,
  IonToolbar,
  IonIcon,
  IonContent,
  IonButton,
  IonAvatar
} from '@ionic/vue';
import { getCurrentInstance } from 'vue';
import { ref, onMounted } from 'vue';
import axios from 'axios';
const { proxy } = getCurrentInstance();

const logout = () => {
  proxy.$user.logout();
};
// 用户信息响应式对象
const userInfo = ref({
  loginName: '',
  realNameForChinese: '',
});

const roleInfo = ref({
  displayRoleName: ''
});

// 获取用户信息
const fetchUserInfo = async () => {
  try {
    const accessToken = localStorage.getItem('accessToken');
    // const response = await axios.get('https://www.svom.cn/svomUPMS/user/profile', {
    const response = await axios.get('https://www.svom-gwacn.cn/svomUPMS/user/profile', {
      params:{
          accessToken:accessToken
        },
      headers: { Authorization: `Bearer ${accessToken}` }
    });
    
    // 更新用户信息
    userInfo.value = {
      loginName: response.data.data.userInfo.loginName,
      realNameForChinese: response.data.data.userInfo.realNameForChinese,
    };

    // 更新角色信息
    roleInfo.value = {
      displayRoleName: localStorage.getItem('displayRoleName') || ''
    };

  } catch (error) {
    console.error('获取用户信息失败:', error);
  }
};

// 初始化时获取信息
onMounted(() => {
  fetchUserInfo();
});

</script>

<style scoped>
.user-header {
  display: flex;
  align-items: center;
  padding: 20px;
}

.user-avatar {
  width: 80px;
  height: 80px;
  margin-right: 20px;
}

.user-info h2 {
  margin: 0;
  font-size: 1.5rem;
}

.user-info p {
  margin: 5px 0;
  color: #666;
}
</style>
